﻿@{
 ViewBag.Title = "Creating a ASP MVC CRUD application";
 Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Creating a ASP MVC CRUD application</h2>
<h3>Understanding the differences between  ASP web forms & ASP  MVC</h3>
<p>In ASP MVC the way pages are requested (GET), sent (POST), and how database access is achieved differs significantly compared to traditional  ASP  or ASP web forms. When working with web pages in traditional ASP or ASP web forms, developers either combined HTML markup and business logic in the same page (ASP) or worked with out of the box data controls such as grids, repeaters, buttons, etc. (ASP web forms). The combination of HTML markup and business logic in ASP is predominately why most developers dropped it. ASP web form controls made creating a web page easy and quick, not to mention associating data to them through native data binding calls a cinch. </p>
<p>However, with ASP web forms, we lost some key abilities early on which made customizing and delegating responsibilities of concerns difficult:</p>
<ol>
<li>
Out of the box data controls returned native HTML markup from Microsoft, which may/may not work for your needs
<ol type="a">
<li>There were ways around this but involved writing your own custom controls which was time consuming and tedious</li>
</ol>
</li>
<li>Out of the box data controls and the web form in general were executed at the server level, which in most cases with the HTTP protocol isn’t necessary</li>
<li>
Out of the box data controls in a web form didn’t have to be strongly typed to business logic/model:
<ol type="a">
<li>This meant a developer could easily place their code in the code-behind file for each web form. As a result, re-usability of code was lost and in larger scale applications, architecturally, developers were tied to one class for business logic and data access</li>
</ol>
</li>
<li>GET/POST commands were largely handled internally by the framework</li>
<li>
Database access could be achieved by:
<ol type="a">
<li>
Stored procedures - Depending on size and scale of an application, these can be complex & a performance hindrance
</li>
<li>
Inline SQL - When using an update operation to a specific page, if parameter’s are not added to a WHERE clause, these queries can be used in malicious attacks (SQL injection) against a database
</li>
</ol>
</li>
</ol>
<p>In  MVC, specifically with regard to  ASP, much of these tradeoffs have been resolved and simplified. With respect to the numbers above, MVC does the following:</p>
<ol>
<li>While there are out of box  HTML helper classes (Razor) that do produce  HTML markup from the server, the majority of the markup of your application is entirely up to the developer, including placement</li>
<li>While there are out of box  HTML helper classes (Razor) that execute at the server level, the majority of the HTML markup isn’t</li>
<li>When working with views in  MVC there must be an associated model typed to the view and any data a developer wants created or modified must be specifically data bound to an HTML helper class</li>
<li>GET/POST commands are handled explicitly by developers, with the aid of Visual Studio where needed</li>
<li>
Database access can be achieved by:
<ol type="a">
<li>
Stored procedures - Same concerns arise as with traditional  ASP web forms
</li>
<li>
Inline SQL - Same concerns arise as with traditional  ASP web forms
</li>
<li>
Entity Framework - Many of the issues surrounding SQL injection and performance of queries can be reduced or eliminated
</li>
</ol>
</li>
</ol>
<p>The next section will dig deeper into the above mentioned areas.</p>
<h3>Understanding how applicant records are created</h3>
<p>Since we have an understanding at a basic level of the differences between traditional ASP ASP web forms and  MVC, let’s look at how applicant records for examples of these behaviors:</p>
<ul class="indent">
 <li>With the solution open, press F5 on the keyboard and wait for the home page to load</li>
 <li>In the top menu, left click Applicant link</li>
 <li>From the Applicant home page, left click Create New</li>
</ul>
<p>When we left click Create New from the Applicant home page, the following code is executed:</p>
<pre class="brush:csharp">
 // GET: /Applicant/Create
 public ActionResult Create()
 {
    return View();
 }
</pre>
<p>As you can see from the code:</p>
<ul class="indent">
 <li>We have a method named Create, with an implicit GET command which simply returns the contents from our create view</li>
</ul>
<p>Import note here is that we haven’t actually created an applicant - we are only viewing the page, creation comes next.</p>
<p>Looking in our view, we see the following at the top:</p>
<pre class="brush:csharp">
model IEnumerable&lt;AdmissionApplication.Models.Applicant&gt;
</pre>
<p>Note: You will need to place (at) symbol before model.</p>
<p>As you can see from the code:</p>
<ul class="indent">
 <li>
  We reference a strongly typed model, in our case, Applicants:
  <ul>
   <li>This allows our view the ability to data bind inputted data from our form fields and allows a one-to-one mapping to the properties in our applicant’s model</li>
  </ul>
 </li>
</ul>
<p>Continuing, the binding between our view and model:</p>
<pre class="brush:html">
using (Html.BeginForm()) 
{
<div class="form-horizontal">
<h4>Applicants</h4>
<hr />
Html.ValidationSummary(true)
<div class="form-group">
Html.LabelFor(model => model.FirstName, new { class = "control-label col-md-2" })
<div class="col-md-10">
Html.EditorFor(model => model.FirstName)
Html.ValidationMessageFor(model => model.FirstName)
</div>
</div>
</pre>
<p>Note: You will need to preface the following with (at) symbol: using, Html, and class</p>
<p>As you can see from the code:</p>
<ul class="indent">
 <li>Before the form  HTML markup starts, we use Razor’s HTML helper object and call BeginForm to instruct MVC this form is processing a database operation</li>
 <li>Next, we see the use of the HTML helper object and its call of ValidationSummary which instructs  MVC to display error messages when applicable</li>
 <li>
  Inside the parent DIV, we use the html helper object and call LabelFor method which accepts a few parameters, in our case, the model property FirstName
  <ul>
   <li>LabelFor is a class method for displaying a label in HTML markup from Razor syntax</li>
  </ul>
 <li>
  Inside the second DIV, we use the html helper object and call EditorFor method passing in our model property FirstName
  <ul>
   <li>
    EditorFor is a class method for display an input text field in 
     HTML
     markup from Razor syntax
   </li>
  </ul>
 <li>
  Lastly, we call ValidationMessageFor method, and pass in our model property FirstName, which allows us to later create validation requirements in our model that flow to our controller and back to the respective view
  <ul>
   <li>ValidationMessageFor is a class method for displaying error message in HTML markup from Razor syntax</li>
  </ul>
 </li>
</ul>
<p>Razor syntax is a special type of markup in  MVC that’s similar to  HTML and gives us many built-in features for working with a variety of controls in MVC (input, labels, validation, et al) through the use of a HTML helper object. Razor also gives us unparalleled control of the layout of a web page. Using Razor we are no longer cornered into controls that offer limited support with regard to their placement. MVC and Razor also eliminates a bloated view state from a rendered view that was present in ASP web forms. </p>
<p>Once we have all fields with the supplied data click create which executes the following:</p>
<pre class="brush:csharp">
 [HttpPost]
 public ActionResult Create(Applicants applicants)
 {
    if (ModelState.IsValid)
    {
        db.Applicant.Add(applicants);
        db.SaveChanges();
        return RedirectToAction("Index");
     }
        return View(applicants);
 }
</pre>
<p>As you can see from the code:</p>
<ul class="indent">
<li>We have a method named Create, with an explicit POST command [HttpPost] which instructs  MVC to post our page to the server</li>
<li>In the method signature, we pass in our model class</li>
<li>Inside the method:
<ul>
<li>We first check if the model state is valid, i.e., has appropriate validation on the model properties passed:</li>
<li>If true, we use our db object, look for our applicant data context object, and use the add method, passing in our applicant object, which contains data from our form fields:</li>
<li>We then call SaveChanges method which instructs entity framework to perform an operation against our database</li>
<li>We redirect  MVC back to our original applicant home page</li>
</ul>
</li>
<li>If false, we exit any further operations, and pass back the correct entries along with errors back to our original create applicant view</li>
</ul>
<p>
 If creation of applicant entries was successful, we’ll see them listed in our applicant home page. In summation,  MVC uses a combination of implicit GET commands to get data and return a view, while explicit POST commands
 set/perform operations against a razor view and accompanying database.
</p>
<p>We'll continue with validation of our applicants @Html.ActionLink("next", "Index6").</p>